<!DOCTYPE html>
<html>

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>广告分类管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">广告分类管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" onclick="deleteallTbContentCategory()" title="批量删除"><i
                            class="fa fa-trash-o"></i> 批量删除
                    </button>
                    <!--<button type="button" class="btn btn-default" title="开启" onclick='confirm("你确认要开启吗？")'><i
                            class="fa fa-check"></i> 开启
                    </button>
                    <button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i
                            class="fa fa-ban"></i> 屏蔽
                    </button>-->
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">
                名称：<input id="name">
                <button class="btn btn-default" onclick="showcontents()">查询</button>
            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" onclick="reversal()" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">分类ID</th>
                <th class="sorting">分类名称</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="contents">
            </tbody>
        </table>
        <!--数据列表/-->
    </div>
    <!-- 数据表格 /-->
    <!-- 广告分类回显-->
    <script type="text/javascript">

        <!--复选框反转-->
        function reversal() {
            $("[name=checkbox]").prop("checked", $("#selall").prop("checked"))
        }

        //换页逻辑
        function skip(pm) {
            let pageNum = $("#pageNum").text();
            let pages = $("#pages").text();
            if (pm == 0) {
                if (pageNum == 1) {
                    alert("已是首页")
                } else {
                    $("#pageNum").text(1)
                    showcontents()
                }
            } else if (pm == 1) {
                if (pageNum == 1) {
                    alert("已是第一页")
                } else {
                    $("#pageNum").text(pageNum - 1)
                    showcontents()
                }
            } else if (pm == 2) {
                if (pageNum == pages) {
                    alert("已是最后一页")
                } else {
                    $("#pageNum").text(parseInt(pageNum) + 1)
                    showcontents()
                }
            } else if (pm == 3) {
                if (pageNum == pages) {
                    alert("已是末页")
                } else {
                    $("#pageNum").text(pages)
                    showcontents()
                }
            }
        }


        //页面加载事件
        $(function () {
            showcontents()
        })

        function showcontents() {
            //加载换页后品牌内容
            let pageNum = $("#pageNum").text();
            let pages = $("#pages").text();
            let name = $("#name").val();
            $.ajax({
                url: "/TbContentCategory/TbContentCategoryshowall",
                data: {pageNum: pageNum, pages: pages, name: name},
                type: "post",
                dataType: "json",
                async: false,
                success: function (pm) {
                    var TbBrands = pm.data.rows;
                    var s = '';
                    for (let i = 0; i < TbBrands.length; i++) {
                        s += '<tr><td><input type="checkbox" name="checkbox" value="' + TbBrands[i].id + '"></td>'
                        s += '<td>' + TbBrands[i].id + '</td>'
                        s += '<td>' + TbBrands[i].name + '</td>'
                        s += '<td className="text-center">'
                        s += '<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" data-target="#updataeditModal" onclick="echo(' + TbBrands[i].id + ')">修改'
                        s += '</button>'
                        s += ' <button type="button" onclick="deleteTbContentCategory(' + TbBrands[i].id + ')">删除</button>'
                        s += '</td>'
                        s += '</tr>'
                    }
                    s += '<tr><td colspan="5">'
                    s += '<input type="button" value="首页" onclick="skip(0)"> '
                    s += '<input type="button" value="上一页" onclick="skip(1)"> '
                    s += '<span id="pageNum">' + pm.data.pageNum + '</span> / <span id="pages">' + pm.data.pages
                    s += '</span> <input type="button" value="下一页" onclick="skip(2)"> '
                    s += '<input type="button" value="末页" onclick="skip(3)"> '
                    s += '</td></tr>'
                    $("#contents").html(s);
                },
                error: function () {
                    alert("系统异常")
                }
            })
        }
    </script>
</div>
<!-- /.box-body -->
<!-- 分页 -->


<!-- 编辑窗口 添加-->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">广告分类编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>分类名称</td>
                        <td><input class="form-control" placeholder="分类名称" id="names"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" onclick="addTbContentCategory()"
                        aria-hidden="true">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑窗口 修改-->
<div class="modal fade" id="updataeditModal" tabindex="-1" role="dialog" aria-labelledby="updatamyModalLabel"
     aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="updatamyModalLabel">广告分类编辑</h3>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>分类名称<input type="hidden" id="id"></td>
                        <td><input class="form-control" placeholder="分类名称" id="namess"></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" onclick="updateTbContentCategory()"
                        aria-hidden="true">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal"
                        aria-hidden="true">关闭
                </button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    <!--添加品牌-->
    function addTbContentCategory() {
        var name = $("#names").val();
        if (name == '') {
            alert("分类不能为空")
            return
        }
        $.ajax({
            url: "/TbContentCategory/addTbContentCategory",
            data: {name: name},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                alert(pm.message)
                showcontents()
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //回显数据存放
    function echo(id) {
        $.ajax({
            url: "/TbContentCategory/showecho",
            data: {id: id},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                $("#id").val(pm.data.id)
                $("#namess").val(pm.data.name)
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //数据修改
    function updateTbContentCategory() {
        var name = $("#namess").val();
        if (name == '') {
            alert("分类不能为空")
            return
        }
        $.ajax({
            url: "/TbContentCategory/updateTbContentCategory",
            data: {id: $("#id").val(), name: name},
            type: "post",
            dataType: "json",
            async: false,
            success: function (pm) {
                alert(pm.message)
                showcontents()
            },
            error: function () {
                alert("系统异常")
            }
        })
    }

    //数据删除
    function deleteTbContentCategory(id) {
        if (confirm("你确定要删除吗?")) {
            $.ajax({
                url: "/TbContentCategory/deleteTbContentCategory",
                data: {id: id},
                type: "post",
                dataType: "json",
                async: false,
                success: function (pm) {
                    alert(pm.message)
                    showcontents()
                },
                error: function () {
                    alert("系统异常")
                }
            })
        }
    }

    //多条数据删除
    function deleteallTbContentCategory() {
        var ids = []
        $("[name=checkbox]").each(function (i, e) {
            if ($(e).prop("checked")) {
                ids.push($(e).val())
            }
        })
        if (ids == '') {
            alert("请先选择要删除的分类")
            return
        }
        if (confirm("你确定要删除吗?")) {
            $.ajax({
                url: "/TbContentCategory/deleteallTbContentCategory",
                data: {ids: ids},
                type: "post",
                dataType: "json",
                async: false,
                success: function (pm) {
                    alert(pm.message)
                    showcontents()
                },
                error: function () {
                    alert("系统异常")
                }
            })
        }
    }
</script>
</body>
</html>